<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 事件监听
        window.onload = function () {
            // 获取所有的input标记元素
            var input_element = document.getElementsByTagName("input");
            input_element[3].onclick = function () {
                var radius = input_element[0].value;
                input_element[1].value = 2 * 3.14 * radius;
                input_element[2].value = 3.14 * radius * radius;
            }
            input_element[4].onclick = function () {
                input_element[0].value = "";
                input_element[1].value = "";
                input_element[2].value = "";
            }
        }
    </script>
</head>

<body>
    <h3>圆的周长和面积</h3>
    <form action="">
        半径<input type="text" name="" id="" placeholder="请输入半径"><br>
        周长<input type="text" name="" id=""><br>
        面积<input type="text" name="" id=""><br>
        <input type="button" value="确定">
        <input type="button" value="重置">
    </form>
</body>

</html>